<template>
  <view class="form-box">
    <view class="shadow">
      <view class="form">
        <up-form
          labelPosition="left"
          :model="state.model1"
          :rules="state.rules"
          ref="form1"
          labelWidth="70"
          :labelStyle="{ color: '#000', fontSize: '24rpx' }"
        >
          <up-form-item
            label="企业名称"
            prop="userInfo.name"
            borderBottom
            ref="name"
          >
            <up-input
              v-model="state.model1.userInfo.name"
              border="none"
              placeholder="请输入企业名称"
            ></up-input>
          </up-form-item>
          <up-form-item
            label="好感度"
            prop="userInfo.favorability"
            borderBottom
            ref="favorability"
          >
            <up-rate
              :count="5"
              active-color="#fcc12d"
              v-model="state.model1.userInfo.favorability"
            ></up-rate>
          </up-form-item>
          <up-form-item
            label="评论"
            prop="userInfo.comment"
            borderBottom
            ref="comment"
          >
            <up-textarea
              v-model="state.model1.userInfo.comment"
              class="textarea-box"
              placeholder="请结合实际，客观评价！"
            ></up-textarea>
          </up-form-item>
          <up-form-item
            label="上传图片"
            prop="userInfo.comment"
            borderBottom
            ref="comment"
          >
            <up-upload
              :fileList="state.model1.userInfo.fileList1"
              @afterRead="afterRead"
              @delete="deletePic"
              name="1"
              multiple
              :maxCount="4"
            ></up-upload>
          </up-form-item>
        </up-form>
        <view class="icon-box">
          <img src="../../../static/img/fileImg.png" alt="" class="icon1" />
          <img src="../../../static/img/pedestal.png" alt="" class="icon2" />
        </view>
      </view>
    </view>
    <view class="form-btn">
      <button class="mini-btn confirm" size="mini">确认</button>
      <button class="mini-btn reset" size="mini">重置</button>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive } from "vue";
// form
const state = reactive({
  model1: {
    userInfo: {
      name: "",
      favorability: 3,
      comment: "",
      fileList1: [],
    },
  },
  rules: {
    "userInfo.name": {
      type: "string",
      required: true,
      message: "请填写姓名",
      trigger: ["blur", "change"],
    },
    "userInfo.favorability": {
      type: "number",
      required: true,
      message: "请选择好感度",
    },
  },
});

/** 上传 **/
// 删除图片
const deletePic = (event) => {
  state.model1.userInfo.fileList1.splice(event.index, 1);
};
// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = state.model1.userInfo.fileList1.length;
  lists.map((item) => {
    state.model1.userInfo.fileList1.push({
      ...item,
      status: "uploading",
      message: "上传中",
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    let item = state.model1.userInfo.fileList1[fileListLen];
    state.model1.userInfo.fileList1.splice(fileListLen, 1, {
      ...item,
      status: "success",
      message: "",
      url: result,
    });
    fileListLen++;
  }
};
const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    let a = uni.uploadFile({
      url: "http://10.0.0.22:3050/admin/upload", // 仅为示例，非真实的接口地址
      filePath: url,
      name: "file",
      formData: {
        user: "test",
      },
      success: (res) => {
        setTimeout(() => {
          resolve(res.data.data);
        }, 1000);
      },
    });
  });
};
</script>

<style lang="scss">
.form-box {
  width: 100%;
  height: calc(100vh - 81rpx);
  position: relative;
  .form {
    width: 680rpx;
    height: 730rpx;
    border-radius: 18rpx 18rpx 18rpx 18rpx;
    z-index: 999;
    margin: 0 35rpx;
    padding: 0 24rpx;
    padding-top: 10rpx;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    overflow: hidden;
    .icon-box {
      width: 185rpx;
      height: 174rpx;
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: -1;
      @keyframes floatUpDown {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-8rpx);
        }
        100% {
          transform: translateY(0);
        }
      }
      .icon1 {
        width: 142rpx;
        height: 127rpx;
        display: block;
        position: absolute;
        margin: 0 auto;
        top: 0;
        left: 30rpx;
        animation: floatUpDown 2s ease-in-out infinite;
        z-index: 2;
      }
      .icon2 {
        width: 185rpx;
        height: 74rpx;
        display: block;
        position: absolute;
        bottom: -8rpx;
        z-index: 1;
      }
    }
    ::v-deep .u-textarea {
      background-color: #f2f2f2 !important;
      border-radius: 13rpx !important;
      border: none;
      color: #000000;
      font-size: 24rpx !important;
      padding: 4px;
      box-sizing: border-box;
    }
    ::v-deep .u-upload__button {
      background-color: #f2f2f2 !important;
      border-radius: 13rpx !important;
    }
    ::v-deep .u-form-item__body {
      padding: 27rpx;
      position: relative;
    }
    ::v-deep .u-form-item:last-child {
      .u-line {
        // border: none !important;
        // height: 1rpx;
        // background: linear-gradient(10deg, #00000000, #a7a7a7 50%, #00000000);
        display: none;
      }
    }
    ::v-deep .u-upload__wrap__preview {
      border-radius: 13rpx !important;
    }
    ::v-deep .u-input__content__field-wrapper__field,
    .u-textarea__field {
      font-size: 24rpx !important;
    }
  }
  .shadow {
    width: 100%;
    height: 760rpx;
    margin-top: 72rpx;
    background-image: url("../../../static/img/shadow.png");
    background-size: 100% 100%;
    background-position: 0 8rpx;
  }
  .form-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 100rpx;
    .mini-btn {
      width: 432rpx;
      height: 71rpx;
      line-height: 71rpx;
      border-radius: 14rpx;
      font-size: 30rpx;
    }
    .confirm {
      background: #d9e4f7;
      border: 1rpx solid #2874f2 !important;
      color: #2874f2;
      margin-bottom: 30rpx;
    }
    .reset {
      background: #fff;
      border: 1rpx solid #828282 !important;
      color: #474747;
      border-radius: 14rpx;
    }
  }
}
</style>
